<template>
  <CommonCard title="累计用户数" value="117,796,5">
    <div ref="barChartRef" style="width: 100%; height: 100%"></div>
    <template #footer>
      <div class="bottom">
        <span>日同比</span>
        <!-- 为了给字体设置颜色 -->
        <span class="emphasis">-19.16%</span>
        <!-- 箭头 -->
        <span class="decrement"></span>

        <span>月同比</span>
        <!-- 为了给字体设置颜色 -->
        <span class="emphasis">56.67%</span>
        <!-- 箭头 -->
        <span class="increment"></span>
      </div>
    </template>
  </CommonCard>
</template>

<script lang="ts" setup>
import CommonCard from "./CommonCard.vue";
import { ref, onMounted } from "vue";
// 引入echarts插件
import * as echarts from "echarts";
import type { EChartsType } from "echarts";
let myChart: EChartsType;

// 获取真实dom
let barChartRef = ref();

// 设置配置项
let getOption = () => {
  return {
    tooltip: {
      trigger: "axis",
      show: true,
    },
    grid: {
      left: 0,
      right: 0,
    },
    xAxis: {
      show: false,
      min: 0,
      max: 100,
    },
    yAxis: {
      show: false,
      data: ["数据"],
    },
    series: [
      {
        name: "累计用户数",
        type: "bar",
        data: [42],
        //设置柱状宽度
        barWidth: 10,
        //显示柱状图背景
        showBackground: true,
        // 设置背景颜色
        backgroundStyle: {
          color: "#bfc",
        },
        // 这只柱状图字体
        label: {
          show: true,
          // 要显示的文字
          formatter: "|",
          position: "right",
          fontSize: "12px",
        },
      },
    ],
  };
};

onMounted(() => {
  // 初始化echarts 对象
  myChart = echarts.init(barChartRef.value, "dark");
  //得到series内容进行页面渲染
  myChart.setOption(getOption());
  // 添加事件监听
  window.addEventListener("resize", () => {
    myChart && myChart.resize();
  });
});
</script>

<style lang="scss" scoped>
.bottom {
  display: flex;
  align-items: center;
}
</style>
